<template>
  <div class="left-top">
    <div class="headers_person_right">
      <div class="headers_left">
        <span>我的记事本</span>
      </div>
   
    </div>
    <div class="my-calendar">
      <div class="calendar-right">
        <div class="calendarControl">
          <div>
            <i class="el-icon-d-arrow-left" @click="prevYear"></i>
            <i class="el-icon-arrow-left prevMonth" @click="prevMonth"></i>
          </div>
          <div>
            <i class="el-icon-arrow-right nextMonth" @click="nextMonth"></i>
            <i class="el-icon-d-arrow-right" @click="nextYear"></i>
          </div>
       
        
        </div>
        <el-calendar v-model="value" class="custom-calendar">
          <template slot="dateCell" slot-scope="{ date, data }">
            <div
              :class="[
                'calendarBox',
                data.isSelected ? 'is-selected' : '',
                isRestDay(data.day) ? 'rest-day' : '',
              ]"
              @click="handleDateClick(date)"
            >
              <!-- <p>{{ Number(data.day.split('-')[2]) }}</p><span class="lunar">{{ lunarDateMap[date.toDateString()] }}</span> -->
              <p class="todat" v-if="isToday(data.day)">今</p>
              <p v-else class="todat">{{ Number(data.day.split("-")[2]) }}</p>
            
              <span v-if="isRestDay(data.day)"> - </span>
            </div>
          </template>
        </el-calendar>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom_title">
        <div>
          <span>日程详情</span>
        </div>
       

        <div class="headers_right" @click="openEditDialog">添加日程</div>
      </div>
      <div class="bottom_list">
        <div
          class="bottom_list_one"
          v-for="(item, index) in recordList"
          :key="index"
          @mouseenter="hoverIndex = index"
          @mouseleave="hoverIndex = null"
        >
          <div class="bottom_list_one_left">
            <div></div>
          </div>
          <div class="bottom_list_one_center" :style="{
            width: hoverIndex === index ? '50%' : ''
          }">
            <div class="bottom_list_one_center_time">
              {{ item.startTime }}-{{ item.endTime }}
            </div>
            <div class="bottom_list_one_center_title">
              {{ item.content }}
            </div>
          </div>
          <div class="bottom_list_one_right"  v-if="hoverIndex === index">
            <div
              class="bottom_list_one_right_img1"
              @click="handleDelete(item, index)"
            >
              <img src="../../assets/img/del.png" alt="删除" />
            </div>
            <div
              class="bottom_list_one_right_img2"
              @click="handleAdd(item, index)"
            >
              <img src="../../assets/img/add.png" alt="修改" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="添加日程" :visible.sync="isDialogVisible">
      <el-form>
        <el-form-item label="选择日期">
          <el-date-picker
            v-model="selectedDate"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>

        <el-form-item label="选择时间范围">
          <el-time-picker
            v-model="startTime"
            placeholder="开始时间"
            format="HH:mm"
            value-format="HH:mm"
          />
          <span> - </span>
          <el-time-picker
            v-model="endTime"
            placeholder="结束时间"
            format="HH:mm"
            value-format="HH:mm"
          />
        </el-form-item>
        <el-form-item label="日程内容">
          <el-input
            type="textarea"
            v-model="eventContent"
            placeholder="请输入日程内容"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改日程" :visible.sync="isDialogVisiblechange">
      <el-form>
        <el-form-item label="选择日期">
          <el-date-picker
            v-model="selectedDatechange"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>

        <el-form-item label="选择时间范围">
          <el-time-picker
            v-model="startTimechange"
            placeholder="开始时间"
            format="HH:mm"
            value-format="HH:mm"
          />
          <span> - </span>
          <el-time-picker
            v-model="endTimechange"
            placeholder="结束时间"
            format="HH:mm"
            value-format="HH:mm"
          />
        </el-form-item>
        <el-form-item label="日程内容">
          <el-input
            type="textarea"
            v-model="eventContentchange"
            placeholder="请输入日程内容"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelchange">取消</el-button>
        <el-button type="primary" @click="confimchange">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Lunar } from "lunar-javascript";
import { getNavbar } from "@/api/index";
export default {
  name: "LunarCalendar",
  data() {
    return {
      recordList: [],
      isDialogVisiblechange: false,
      data:  this.formatDate(new Date()),
      currentDate: this.formatDates(new Date()), // 默认值为当前年月
      isDialogVisible: false,
      selectedDate: "",
      startTime: "",
      endTime: "",
      eventContent: "",
      selectedDatechange: "",
      startTimechange: "",
      endTimechange: "",
      eventContentchange: "",
      hoverIndex: null,
      value: new Date(),
      lunarDateMap: {},
      restDays: ["ww22", "w33", "2024-07-26", "2024-08-16"],
      firstMondayOfCurrentMonth: null,
      YXWeek: "",
      boId:''
    };
  },
  methods: {

    getlist() {
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.notepad.query",
        date: this.data,
      };
      getNavbar(param).then((res) => {
        // console.log("瞅瞅我自己调了啥",res);
        const { result, msg, data, id } = res;
        if (result === "ok") {
      
          this.recordList = res.data.recordList;
        }
      });
    },
    handleDelete(item, index) {
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.notepad.update",
        boId: item.boId,
        date: item.date,
        startTime: item.startTime,
        endTime: item.endTime,
        content: item.content,
        type: "delete",
      };
      getNavbar(param).then((res) => {
   
        const { result, msg, data, id } = res;
        if (res.result == "ok") {
          this.$message.success(res.msg);
          this.getlist();
        }
      });
    },
    cancelchange() {
      this.isDialogVisiblechange = false; // 关闭弹窗
    },
    confimchange() {
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.notepad.update",
        boId: this.boId,
        date: this.selectedDatechange,
        startTime: this.startTimechange,
        endTime: this.endTimechange,
        content: this.eventContentchange,
        type: "update",

      };
      getNavbar(param).then((res) => {
    
        const { result, msg, data, id } = res;
        if (res.result == "ok") {
          this.$message.success(res.msg);
          this.isDialogVisiblechange = false; // 关闭弹窗
          this.getlist();
        }
      });
    },
    handleAdd(item, index) {
 

      this.selectedDatechange = item.date; // 假设 item 中有 date 属性
      this.startTimechange = item.startTime;
      this.endTimechange = item.endTime;
      this.eventContentchange = item.content;
      this.boId=item.boId;
      this.isDialogVisiblechange = true; // 打开弹窗
    },
    openEditDialog() {

      const currentDate = new Date();
    
    // 设置日期为当天
    this.selectedDate = this.data; // 格式化为 "yyyy-MM-dd"
    
    // 设置时间为当前的时分
    const hours = currentDate.getHours().toString().padStart(2, '0');
    const minutes = currentDate.getMinutes().toString().padStart(2, '0');
    const currentTime = `${hours}:${minutes}`;
    
    this.startTime = currentTime; // 默认开始时间

      this.isDialogVisible = true;
    },
    cancel() {
      this.isDialogVisible = false;
      this.resetForm();
    },
    confirm() {
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.notepad.add",
        date: this.selectedDate,
        startTime: this.startTime,
        endTime: this.endTime,
        content: this.eventContent,
      };
      getNavbar(param).then((res) => {
        if (res.result == "ok") {
          this.$message.success(res.msg);
          this.isDialogVisible = false;
          this.getDays();
          this.getlist();
          this.resetForm();
        }
      });
    },
    resetForm() {
      this.selectedDate = "";
      this.startTime = "";
      this.endTime = "";
      this.eventContent = "";
    },
    isToday(day) {
      const today = new Date();
      const date = new Date(day);
      return (
        today.getFullYear() === date.getFullYear() &&
        today.getMonth() === date.getMonth() &&
        today.getDate() === date.getDate()
      );
    },
    // 是否是设定日
    isRestDay(day) {
      return this.restDays.includes(day);
    },
    handleDateClick(date) {
      const formattedDate = date.toLocaleDateString("en-CA");
      this.$emit("message-for-calendar", formattedDate);
   
      this.data = formattedDate;
      this.getlist();
    },
    // 更新给定日期的农历信息
    handleCalendarChange(date) {
      this.updateLunarDate(date);
      this.updateFirstMondayOfCurrentMonth(date);
    },
    // 更新整个月的农历信息
    updateLunarDate(date) {
      const startDate = new Date(date.getFullYear(), date.getMonth() - 1, 1);
      const endDate = new Date(date.getFullYear(), date.getMonth() + 2, 0);
      for (
        let day = new Date(startDate);
        day <= endDate;
        day.setDate(day.getDate() + 1)
      ) {
        const lunar = Lunar.fromDate(day);
        this.$set(
          this.lunarDateMap,
          day.toDateString(),
          `${
            lunar.getDayInChinese() == "初一"
              ? lunar.getMonthInChinese() + "月"
              : ""
          }${lunar.getDayInChinese() != "初一" ? lunar.getDayInChinese() : ""}`
        );
      }
    },

    // 更新当前月份第一行星期一的日期
    updateFirstMondayOfCurrentMonth(date) {
      const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
      const dayOfWeek = firstDayOfMonth.getDay();
      const firstMonday = new Date(firstDayOfMonth);
      firstMonday.setDate(
        firstDayOfMonth.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1)
      );
    },

    // 格式化日期为YYYY-MM-DD格式
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    formatDates(date) {
      if (!(date instanceof Date)) {
        throw new Error("Invalid date");
      }
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      return `${year}-${month}`; // 返回 YYYY-MM 格式
    },

    // 切换到上一年
    prevYear() {
      const currentYear = this.value.getFullYear();
      this.value = new Date(
        currentYear - 1,
        this.value.getMonth(),
        this.value.getDate()
      );
      this.updateLunarDate(this.value);
      this.updateFirstMondayOfCurrentMonth(this.value);
      this.currentDate = this.formatDates(this.value);
      this.getDays();
    },
    // 切换到下一年
    nextYear() {
      const currentYear = this.value.getFullYear();
      this.value = new Date(
        currentYear + 1,
        this.value.getMonth(),
        this.value.getDate()
      );
      this.updateLunarDate(this.value);
      this.updateFirstMondayOfCurrentMonth(this.value);
      this.currentDate = this.formatDates(this.value);
      this.getDays();
    },
    // 切换到上个月
    prevMonth() {
      const currentYear = this.value.getFullYear();
      const currentMonth = this.value.getMonth();
      if (currentMonth === 0) {
        this.value = new Date(currentYear - 1, 11, this.value.getDate());
      } else {
        this.value = new Date(
          currentYear,
          currentMonth - 1,
          this.value.getDate()
        );
      }
      this.updateLunarDate(this.value);
      this.updateFirstMondayOfCurrentMonth(this.value);
      this.currentDate = this.formatDates(this.value);
      this.getDays();
    },
    // 切换到下个月
    nextMonth() {
      const currentYear = this.value.getFullYear();
      const currentMonth = this.value.getMonth();

      if (currentMonth === 11) {
        this.value = new Date(currentYear + 1, 0, this.value.getDate());
      } else {
        this.value = new Date(
          currentYear,
          currentMonth + 1,
          this.value.getDate()
        );
      }
  
      this.updateLunarDate(this.value);
      this.updateFirstMondayOfCurrentMonth(this.value);

      this.currentDate = this.formatDates(this.value);
      this.getDays();
    },

    // 获取日历日程
    getDays() {
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.notepad.queryExitDate",
        date: this.currentDate,
      };
      getNavbar(param).then((res) => {
   
        if (res.result == "ok") {
          this.restDays = res.data.exitDate;
        }
      });
      // const _this = this;
      // getDays(_this.sid)
      //   .then((response) => {
      //     _this.restDays = response.data.restDays;
      //   })
      //   .catch((error) => {
      //     console.error("获取日历日程失败", error);
      //     if (
      //       error.response &&
      //       error.response.data &&
      //       error.response.data.errorCode === "400"
      //     ) {
      //       console.error(error.response.data.msg);
      //     }
      //   });
    },
  },
  mounted() {
    this.sid = this._sid;
    this.getlist();
   
    this.updateLunarDate(new Date());
    this.updateFirstMondayOfCurrentMonth(new Date());
    this.getDays();
  },
};
</script>

<style lang="scss" scoped>
/* 隐藏滚动条 - 适用于 Chrome 和 Safari */
.bottom::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

/* 隐藏滚动条 - 适用于 Firefox */
.bottom {
  scrollbar-width: none; /* 隐藏滚动条 */
  overflow-y: scroll;
  flex: 1;
}
.bottom {
  margin: 0 30px;
  max-height: 300px;
 
  overflow-y: scroll;
  .bottom_title {
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 18px;
    display: flex;
        align-items: center;
        justify-content: space-between;
    color: #333333;
  }
  .bottom_list {
   
    .bottom_list_one {
      background: rgba(238, 238, 238, 0.4);
      display: flex;
      /* align-items: center; */
      margin-top: 5px;
      padding: 10px;
      border-radius: 5px;

    
      transition: background-image 0.3s ease; /* 背景图渐变效果 */
      position: relative;
      .bottom_list_one_left {
        flex: 0 0 5%;
        margin-top: 4px;
        div {
          width: 8px;
          height: 8px;
          background: #0f06f0;
          border-radius: 50%;
        }
      }
      .bottom_list_one_center {
        width: 80%;
        .bottom_list_one_center_time {
          font-family: DIN Next LT Pro;
          font-weight: 500;
          font-size: 16px;
          color: #1e4398;
        }
        .bottom_list_one_center_title {
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #666666;
          margin-top: 8px;
        }
      }
      .bottom_list_one_right {
        display: flex;
        position: absolute;
       
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
      
        .bottom_list_one_right_img1 {
          width: 38px;
          height: 38px;
          margin-right: 15px;
          img {
            width: 100%;
            height: 100%;
            cursor: pointer;
          }
        }
        .bottom_list_one_right_img2 {
          width: 38px;
          height: 38px;
          img {
            width: 100%;
            height: 100%;
            cursor: pointer;
          }
        }
      }
    }
    .bottom_list_one:hover {
      background-image: url("../../assets/img/cardbg.png"); /* 替换为你的背景图路径 */
      background-size: 100% 100%; /* 根据需要调整背景图的大小 */
      background-position: center; /* 背景图居中 */
    }
  }
}
.prev .el-calendar-day .calendarBox p {
  color: #968d8d;
}
.next .el-calendar-day .calendarBox p {
  color: #968d8d;
}
.headers_person_right {

  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.headers_person_right .headers_left span {
  font-family: "PingFang SC", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #323333;
}
.headers_right {
  display: flex;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #1e4398;
  cursor: pointer;
}

.carous_img {
  width: 100%;
  height: 100%;
}

.headers_person_right span {
  border-left: 4px solid #1e4398;
  padding-left: 9px;
}

::v-deep .el-calendar__title {
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 21px;
  color: #333333;
}
::v-deep .el-backtop,
.el-calendar-table td.is-today .el-calendar-day .calendarBox {
  background: #ededed;
  box-shadow: 0px 2px 8px 0px rgba(44, 100, 223, 0.1);
  border-radius: 10px;
}
::v-deep .el-backtop,
.el-calendar-table td.is-today .el-calendar-day .calendarBox p {
  font-family: DIN Next LT Pro;
  font-weight: 400;
  font-size: 16px;
  color: #666666;
}

.todat {
  font-family: DIN Next LT Pro;
  font-weight: 400;
  font-size: 16px;
}
.left-top {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 2px 6px 0px rgba(139, 157, 175, 0.1);
  height: 100%;
  border-radius: 10px;
  display: flex;
  flex-direction: column;

}
::v-deep .el-calendar-table thead th {
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 18px;
  color: #666666;
}
.my-calendar {
  display: flex;
  position: relative;
  margin: 0 23px 23px 23px;
  flex: 0 0 46%;

  .calendar-right {
    width: 100%; // 3.8rem * 16px
    position: relative;

    .rest-day {
    
    }

    ::v-deep .el-calendar {
      border: none;

      .el-calendar__header {
        border-bottom: none;
        justify-content: center;
      }

      .el-calendar-table {
        th {
          border-bottom: none;
        }

        td {
          border: none;
        }

        td.is-selected {
          background-color: transparent;
          border-radius: 5px;
        }
        td.is-today {
          background-color: transparent;
          border-radius: 5px;
        }
      }
    }

    .calendarControl {
      position: absolute;
      width: 100%;
      top: 4%;
      display: flex;
    justify-content: space-between;

      i {
        padding: 0;
        font-size: 20px; // 0.2rem * 16px
        border: none;
        color: #e9eef7;
        cursor: pointer;
        font-weight: bold;
      }

      i:hover {
        color: #83a4ec;
      }
    }

    .el-calendar {
      font-size: 20px; // 0.2rem * 16px
      font-weight: bold;
      background-color: transparent;
    }

    ::v-deep .el-calendar__button-group {
      display: none;
    }

    ::v-deep .el-calendar__header {
      align-items: center;
    }

    .prevMonth {
      margin-right: 60px; // 0.8rem * 16px
    }

    .nextMonth {
     
    }

    ::v-deep .el-calendar__body {
      padding: 0;

      th {
        font-size: 20px; // 0.1777777778rem * 16px
        padding: 1.75px 0; // 0.109375rem * 16px
      }

      .el-calendar-day {
        height: 50px; // 0.525rem * 16px
        padding-top: 0;
        display: flex;
        justify-content: center;

        .calendarBox {
          padding: 12px; // 0.07rem * 16px
          border-radius: 5px;
          position: relative;
          text-align: center;
          min-width: 14px;
          span {
            display: inline-block;
            vertical-align: top;
            line-height: 5px;
            color: orange;
            
            left: 18px;
          }
        }

        .calendarBox:hover {
          color: #ffffff;

          span {
            color: #2c64df;
          }
        }

        .is-selected {
          background-color: #1e4398;
          color: #ffffff !important;

          p {
            color: #ffffff;
          }
        }
        .is-today {
        }
      }

      .el-calendar-day:hover {
        background-color: transparent;
      }
    }
  }

  .calendar-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .lunar {
    font-size: 20px; // 0.1777777778rem * 16px
    color: #aaa;
  }
}
</style>

